<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
import AnalyticsVisits from './analytics-visits.vue';

import { ref, onMounted, markRaw, computed } from 'vue';
import { getAnalysisOverview } from '#/api/dashboard/analysis';
import { useI18n } from '@vben/locales';

const { t } = useI18n();

// 用于存储接口返回的动态数据
const dynamicData = ref({
  userCount: 0,
  visitCount: 0,
  usageCount: 0,
});

const overviewItems = computed<AnalysisOverviewItem[]>(() => [
  { icon: markRaw(SvgCardIcon), title: t('page.dashboard.userCount'), totalTitle: t('page.dashboard.userCountTotal'), totalValue: dynamicData.value.userCount, value: dynamicData.value.userCount },
  { icon: markRaw(SvgCakeIcon), title: t('page.dashboard.visitCount'), totalTitle: t('page.dashboard.visitCountTotal'), totalValue: dynamicData.value.visitCount, value: dynamicData.value.visitCount },
  { icon: markRaw(SvgDownloadIcon), title: t('page.dashboard.downloadCount'), totalTitle: t('page.dashboard.downloadCountTotal'), totalValue: 120_000, value: 8000 },
  { icon: markRaw(SvgBellIcon), title: t('page.dashboard.usageCount'), totalTitle: t('page.dashboard.usageCountTotal'), totalValue: dynamicData.value.usageCount, value: dynamicData.value.usageCount },
]);

onMounted(async () => {
  const data = await getAnalysisOverview();
  dynamicData.value.userCount = data.userCount;
  dynamicData.value.visitCount = data.visitCount;
  dynamicData.value.usageCount = data.usageCount;
});

const chartTabs = computed<TabOption[]>(() => [
  {
    label: t('page.dashboard.trend'),
    value: 'trends',
  },
  {
    label: t('page.dashboard.monthlyVisit'),
    value: 'visits',
  },
]);
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs>

    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" :title="t('page.dashboard.visitCount')">
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" :title="t('page.dashboard.visitCountSource') || t('page.dashboard.visitCount')">
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" :title="t('page.dashboard.visitCountSource') || t('page.dashboard.visitCount')">
        <AnalyticsVisitsSales />
      </AnalysisChartCard>
    </div>
  </div>
</template>
